var body2 = document.querySelector(".body2")
var span1 = body2.querySelector(".span1")
var span2 = body2.querySelector(".span2")
var u = document.querySelector(".ul")
var biao = document.querySelector(".biao")
var s = biao.querySelector("span")
window.onload = function () {
    var ul = document.createElement("ul")
    ul.className = "ul1"
    u.appendChild(ul)
    span2.className = "span2"
    span1.className = "span1 ssp"
    var obj = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
    obj.open('get', 'http://127.0.0.1:3000/guid/new', true);
    obj.send();
    obj.onreadystatechange = function () {
        if (obj.readyState == 4 && obj.status == 200) {
            console.log(obj.responseText);
            var list = JSON.parse(obj.responseText)
            console.log(list);
            for (var i = 0; i < list.length; i++) {
                var li = document.createElement("li")
                li.className = "li"
                ul.appendChild(li)
                var img1 = document.createElement("img")
                img1.className = "img1"
                img1.src = '' + list[i].img + ''
                li.appendChild(img1)
                var p = document.createElement("p")
                p.className = "p"
                p.innerHTML = '' + list[i].text + ''
                li.appendChild(p)
                var img2 = document.createElement("img")
                img2.src = "./imgs/xin.png"
                img2.className = "img2"
                li.appendChild(img2)
                var span5 = document.createElement("span")
                span5.innerHTML = '' + list[i].like + ''
                span5.className = "span5"
                li.appendChild(span5)
                var img3 = document.createElement("img")
                img3.src = "./imgs/reply.png"
                img3.className = "img3"
                li.appendChild(img3)
                var span6 = document.createElement("span")
                span6.innerHTML = '' + list[i].words + ''
                span6.className = "span6"
                li.appendChild(span6)
                var img4 = document.createElement("img")
                img4.src = "./imgs/listbg.jpg"
                img4.className = "img4"
                li.appendChild(img4)


                console.log(list[i]);
            }



        }
        var ul1 = u.lastElementChild
        var lis = ul1.querySelectorAll("li")
        for (var m = 8; m < lis.length; m++) {
            lis[m].style.display = "none"
        }
        s.onclick = function () {
            for (var m = 8; m < lis.length; m++) {
                lis[m].style.display = "block"
            }
        }
    }
}
///////////
///////////
span1.addEventListener("click", function () {
    var ul1 = document.querySelectorAll(".ul1")
    for (var n = 0; n < ul1.length; n++) {
        ul1[n].style.display = "none"
    }
    var ul = document.createElement("ul")
    ul.className = "ul1"
    u.appendChild(ul)
    span2.className = "span2"
    span1.className = "span1 ssp"
    var obj = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
    obj.open('get', 'http://127.0.0.1:3000/guid/new', true);
    obj.send();
    obj.onreadystatechange = function () {
        if (obj.readyState == 4 && obj.status == 200) {
            console.log(obj.responseText);
            var list = JSON.parse(obj.responseText)
            console.log(list);
            for (var i = 0; i < list.length; i++) {
                var li = document.createElement("li")
                li.className = "li"
                ul.appendChild(li)
                var img1 = document.createElement("img")
                img1.className = "img1"
                img1.src = '' + list[i].img + ''
                li.appendChild(img1)
                var p = document.createElement("p")
                p.className = "p"
                p.innerHTML = '' + list[i].text + ''
                li.appendChild(p)
                var img2 = document.createElement("img")
                img2.src = "./imgs/xin.png"
                img2.className = "img2"
                li.appendChild(img2)
                var span5 = document.createElement("span")
                span5.innerHTML = '' + list[i].like + ''
                span5.className = "span5"
                li.appendChild(span5)
                var img3 = document.createElement("img")
                img3.src = "./imgs/reply.png"
                img3.className = "img3"
                li.appendChild(img3)
                var span6 = document.createElement("span")
                span6.innerHTML = '' + list[i].words + ''
                span6.className = "span6"
                li.appendChild(span6)
                var img4 = document.createElement("img")
                img4.src = "./imgs/listbg.jpg"
                img4.className = "img4"
                li.appendChild(img4)


                console.log(list[i]);
            }

            var ul1 = u.lastElementChild
            var lis = ul1.querySelectorAll("li")
            for (var m = 8; m < lis.length; m++) {
                lis[m].style.display = "none"
            }
            s.onclick = function () {
                for (var m = 8; m < lis.length; m++) {
                    lis[m].style.display = "block"
                }
            }

        }
    }
})

//////
//////
span2.addEventListener("click", function () {
    var ul1 = document.querySelectorAll(".ul1")
    for (var n = 0; n < ul1.length; n++) {
        ul1[n].style.display = "none"
    }
    var ul = document.createElement("ul")
    ul.className = "ul1"
    u.appendChild(ul)
    span2.className = "span2 ssp"
    span1.className = "span1 "
    var obj = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
    obj.open('get', 'http://127.0.0.1:3000/guid/hot', true);
    obj.send();
    obj.onreadystatechange = function () {
        if (obj.readyState == 4 && obj.status == 200) {
            console.log(obj.responseText);
            var list = JSON.parse(obj.responseText)
            console.log(list);
            for (var i = 0; i < list.length; i++) {
                var li = document.createElement("li")
                li.className = "li"
                ul.appendChild(li)
                var img1 = document.createElement("img")
                img1.className = "img1"
                img1.src = '' + list[i].img + ''
                li.appendChild(img1)
                var p = document.createElement("p")
                p.className = "p"
                p.innerHTML = '' + list[i].text + ''
                li.appendChild(p)
                var img2 = document.createElement("img")
                img2.src = "./imgs/xin.png"
                img2.className = "img2"
                li.appendChild(img2)
                var span5 = document.createElement("span")
                span5.innerHTML = '' + list[i].like + ''
                span5.className = "span5"
                li.appendChild(span5)
                var img3 = document.createElement("img")
                img3.src = "./imgs/reply.png"
                img3.className = "img3"
                li.appendChild(img3)
                var span6 = document.createElement("span")
                span6.innerHTML = '' + list[i].words + ''
                span6.className = "span6"
                li.appendChild(span6)
                var img4 = document.createElement("img")
                img4.src = "./imgs/listbg.jpg"
                img4.className = "img4"
                li.appendChild(img4)


                console.log(list[i]);
            }


            var ul1 = u.lastElementChild
            var lis = ul1.querySelectorAll("li")
            for (var m = 8; m < lis.length; m++) {
                lis[m].style.display = "none"
            }
            s.onclick = function () {
                for (var m = 8; m < lis.length; m++) {
                    lis[m].style.display = "block"
                }
            }
        }
    }

})